"use strict";
$(document).ready(function() {

  var $table = $('#products').DataTable({
    bProcessing : true,
    bServerSide : true,
    scrollX: true,
    sPaginationType : 'full_numbers',
    oLanguage : {
      sLengthMenu : '每页显示 _MENU_ 条',
      sInfo : '第 _START_ -  _END_ 条，共 _TOTAL_ 条',
      sInfoFiltered : '',
      sInfoEmpty : '没有数据',
      sZeroRecords : '没有数据',
      sProcessing : '正在加载数据...',
      oPaginate : {
        sFirst : '首页',
        sPrevious : '前一页',
        sNext : '后一页',
        sLast : '末页'
      },
      sSearch : '检索',
      sSearchPlaceholder : '输入编号、名称、厂家或电话'
    },
    columns : [ {
      data : 'id',
      width: '50px',
      className: 'text-center'
    }, {
      data : 'color',
      width: '60px',
      className: 'text-center',
      render: function( data, type, row, meta ) {
        var v = $.trim(data);
        if(v == '') {
          return '';
        }
        return '<div class="icon" style="background-color: ' + v + '"></div>';
      }
    }, {
      data : 'name',
      width: '100px'
    }, {
      data : 'barcode',
      width: '100px'
    }, {
      data : 'unit',
      width: '50px'
    }, {
      data : 'spec',
      width: '100px'
    }, {
      data : 'vendor',
      width: '100px'
    }, {
      data : 'phone',
      width: '100px'
    }, {
      data : 'catalog',
      width: '100px'
    } ],
    order: [ [0, 'asc'] ],
    ajax : function(data, callback, settings) {
      var d = $.customParam(data);
      $.ajax({
        dataType : 'json',
        method : 'POST',
        url : 'products_processing.json',
        data : d,
        success : function(json) {
          var error = json.error || json.sError;
          if (error) {
            alert(error);
            return;
            // _fnLog( oSettings, 0, error );
          }
          settings.json = json;
          callback(json);
        }
      });
    }
  });
  $('#products tbody').on('click', 'tr', function() {
    if ($(this).hasClass('selected')) {
      $(this).removeClass('selected');
    } else {
      $table.$('tr.selected').removeClass('selected');
      $(this).addClass('selected');
    }
  });
  $(".colorpicker").spectrum({
    showPaletteOnly: true,
    showPalette:true,
    hideAfterPaletteSelect:true
  });
  
  // 新增处理
  $('#creatediv form').validate({
    rules : {
      id : {
        required : true,
        remote : {
          url : "product/unused",
          type : "post"
        }
      },
      name : {
        required : true
      }
    },
    messages : {
      id : {
        required : '编号不能为空',
        remote : '编号已使用'
      },
      name : {
        required : '名称不能为空'
      }
    },
    errorClass : 'has-error',
    validClass : 'has-success',
    highlight : function(element, errorClass, validClass) {
      var $c = $(element).closest('div.form-group');
      $c.addClass(errorClass).removeClass(validClass);
    },
    unhighlight : function(element, errorClass, validClass) {
      var $c = $(element).closest('div.form-group');
      $c.removeClass(errorClass).addClass(validClass);
    }
  });
  var addDlg;
  $('#btnAdd').click(function() {
    addDlg = layer.open({
      type : 1,
      title : false,
      zIndex: 100,
      area : '500px',
      closeBtn : true,
      shadeClose : false,
      content : $('#creatediv')
    });
    $('#creatediv form').get(0).reset();
    $('#creatediv form').validate().resetForm();
    $('#add_id')[0].focus();
  });
  $('#creatediv .userdlg-bbar .btn-default').click(function() {
    layer.close(addDlg);
  });
  $('#creatediv .userdlg-bbar .btn-primary').click(function() {
    if (!$('#creatediv form').valid()) {
      layer.alert('请修正输入错误！');
    } else {
      var data = $('#creatediv form').serializeArray();
      data.push({
        '_method' : 'POST'
      });
      $.ajax({
        url : 'product',
        method : 'POST',
        data : data,
        success : function(ret) {
          layer.close(addDlg);
          $table.ajax.reload();
        }
      });
    }
  });

  var refreshImages = function(currentName) {
    var name = currentName;
    $.ajax({
      url : 'product/' + editProduct.id + '/images.json',
      method : 'GET',
      success : function(ret) {
        var html = '';
        for (var i = 0; i < ret.length; i++) {
          var file = ret[i];
          if (!name) {
            name = file.name;
          }
          if (i > 0) {
            html += '&nbsp;';
          }
          html += '<a href="javascript:void(0);"';
          if (name == file.name) {
            html += ' class="selected"';
          }
          html += '>' + file.name + '</a>';
        }
        $('#edit_images').html(html);
        if (name && name.length > 0) {
          $('#imagediv').html('<img src="product/' + editProduct.id + '/' + name + '" />');
        } else {
          $('#imagediv').html('');
        }
      }
    });
  };
  $('#edit_images').on('click', 'a', function() {
    var $this = $(this);
    $('#edit_images a').removeClass('selected');
    $this.addClass('selected');
    $('#imagediv').html('<img src="product/' + editProduct.id + '/' + $this.text() + '" />');
  });
  $('#btndel').on('click', function(){
    //删除图片
    var name = $('#edit_images a.selected').text();
    if(!name || name == '') {
      return;
    }
    $.ajax({
      url : 'product/' + editProduct.id + '/' + name + '.json',
      method : 'POST',
      data: {
        '_method' : 'DELETE'
      }
    }).done(function( data, textStatus, jqXHR ){
      if(!data) {
        return;
      }
      refreshImages();
    });
  });
  // 编辑处理
  $('#editdiv form').validate({
    rules : {
      name : {
        required : true
      }
    },
    messages : {
      name : {
        required : '名称不能为空'
      }
    },
    errorClass : 'has-error',
    validClass : 'has-success',
    highlight : function(element, errorClass, validClass) {
      var $c = $(element).closest('div.form-group');
      $c.addClass(errorClass).removeClass(validClass);
    },
    unhighlight : function(element, errorClass, validClass) {
      var $c = $(element).closest('div.form-group');
      $c.removeClass(errorClass).addClass(validClass);
    }
  });
  var uploader;
  var editDlg;
  var editProduct;
  $('#btnEdit').click(function() {
    var data = $table.row('.selected').data();
    if (!data) {
      layer.alert('请选中待更改的产品！');
      return;
    }
    var loadIndex = layer.load();
    $.ajax({
      url : 'product/' + data.id,
      method : 'GET',
      data : {
        _method : 'GET'
      },
      success : function(ret) {
        layer.close(loadIndex);
        editDlg = layer.open({
          type : 1,
          title : false,
          zIndex: 100,
          area : '800px',
          closeBtn : true,
          shadeClose : false,
          content : $('#editdiv')
        });
        if(!uploader) {
          //容器div不可见时初始化出的按钮无法点击
          uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto : true,
            // swf文件路径
            swf : 'vendors/webuploader/Uploader.swf',
            // 文件接收服务端。
            server : 'product/uploadImage',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick : '#filePicker',

            // 只允许选择图片文件。
            accept : {
              title : 'Images',
              extensions : 'gif,jpg,jpeg,bmp,png',
              mimeTypes : 'image/*'
            }
          });
          uploader.on('uploadBeforeSend', function(object, data, headers) {
            data.id = editProduct.id;
          });
          uploader.on('uploadSuccess', function(file, resp) {
            // alert(resp.id + ' - ' + resp.name);
            refreshImages(resp.name);
          });
        }
        
        $('#editdiv form').get(0).reset();
        $('#editdiv form').validate().resetForm();
        editProduct = ret;
        $('#edit_id').text(editProduct.id);
        $('#edit_name').val(editProduct.name);
        $('#edit_barcode').val(editProduct.barcode);
        $('#edit_unit').val(editProduct.unit);
        $('#edit_spec').val(editProduct.spec);
        $('#edit_vendor').val(editProduct.vendor);
        $('#edit_phone').val(editProduct.phone);
        $('#edit_catalog').val(editProduct.catalog);
        $('#edit_color').spectrum('set', editProduct.color);
        $('#edit_name')[0].focus();
        refreshImages();
      }
    });
  });
  $('#editdiv .userdlg-bbar .btn-default').click(function() {
    layer.close(editDlg);
  });
  $('#editdiv .userdlg-bbar .btn-primary').click(function() {
    if (!$('#editdiv form').valid()) {
      layer.alert('请修正输入错误！');
    } else {
      editProduct.name = $('#edit_name').val();
      editProduct.barcode = $('#edit_barcode').val();
      editProduct.unit = $('#edit_unit').val();
      editProduct.spec = $('#edit_spec').val();
      editProduct.vendor = $('#edit_vendor').val();
      editProduct.phone = $('#edit_phone').val();
      editProduct.catalog = $('#edit_catalog').val();
      editProduct.color = $('#edit_color').val();
      editProduct['_method'] = 'PUT';
      $.ajax({
        url : 'product/' + editProduct.id,
        method : 'POST',
        data : editProduct,
        success : function(ret) {
          layer.close(editDlg);
          $table.ajax.reload();
        }
      });
    }
  });
  // 删除处理
  $('#btnDel').click(function() {
    var data = $table.row('.selected').data();
    if (!data) {
      layer.alert('请选中待删除的产品！');
      return;
    }
    layer.confirm('确认要删除产品\"' + data.name + ' - ' + data.vendor + '\"？', function(index) {
      $.ajax({
        url : 'product/' + data.id,
        method : 'POST',
        data : {
          _method : 'DELETE'
        },
        success : function(ret) {
          layer.close(index);
          $table.ajax.reload();
        }
      });
    });
  });

});